import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
    selector: '[myHighlight]'
})

/*
`@Directive` 元数据的后面就是指令的控制器类，它包括了指令的工作逻辑。
我们导出 `HighlightDirective` 以便让它可以被其他组件访问。
 */

export class HighlightDirective {
    private _defaultColor = 'green';
    private el: HTMLElement;

    constructor(el: ElementRef) {
		this.el = el.nativeElement;
		// el.nativeElement.style.backgroundColor='red';
	}

    @Input() set defaultColor(colorName: string) {
        this._defaultColor = colorName || this._defaultColor;
    }

	/*
	新的 highlightColor 属性被称为“输入”属性，这是因为数据流是从绑定表达式到这个指令的。
	 注意，在定义这个属性的时候，我们调用了 @Input() 装饰器。
	 */
    @Input('myHighlight') highlightColor: string;

	// @HostListener 装饰器引用的是我们这个属性型指令的宿主元素，在这个例子中就是 <p> 。
    @HostListener('mouseenter') onMouseEnter() {
        this.highlight(this.highlightColor || this._defaultColor);
        // this.highlight('green')
    }
    @HostListener('mouseleave') onMouseLeave() {
        this.highlight(null);
    }

    private highlight(color: string) {
        this.el.style.backgroundColor = color;
    }
}
/*
@Input() myHighlight: string;
*/
